<template>
  <div>
     <van-nav-bar
      title="全部评论"
      left-arrow
      placeholder
      fixed
      @click-left="$router.back()"
    />
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <!-- <comment v-for="item in list" :key="item.id" :commentItem="item"/> -->
      <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
      <comment v-for="item in list" :key="item.id" :commentItem="item"/>
    </van-list>
  </div>
</template>

<script>
import { getSelectedCommentListData } from '@/api/Subject'
import comment from './components/comment.vue'
export default {
  components: { comment },
name: 'Message',
data() {
  return {
    id: this.$route.params.id,
    loading: false,
    finished: false,
    list: [],
    query: {
        page: 1, // 页码
        size: 10 //  每页数量
      }   
    }
  },
  methods: {
  async onLoad() {
    // 发送请求
    try {
      const res = await getSelectedCommentListData({
          ...this.query,
          valueId: this.id,
          typeId: 1,
          showType: 0,})
        console.log(res.data.data.data);
        this.list.push(...res.data.data.data)
        // 关闭loading
        this.loading = false
        // 判断是否结束
        if(res.data.data.data.length < this.query.size) {
          this.finished = true
        } else {
          this.query.page++
        }
    } catch (error) {
      console.log(error);
    }
    },
  },
}
</script>

<style lang="less" scoped>
 /deep/ .van-nav-bar__content {
  background: rgb(225, 28, 52);

  }
  /deep/ .van-nav-bar__title {
    color: #fff;
  }
  /deep/ .van-icon {
    color: #fff;
  }
</style>